﻿<template>
    <full-screen-dialog :title="titleMap[mode]" v-model="visible" :width="1200" destroy-on-close>
        <el-form
            :model="entityObj"
            :rules="rules"
            :disabled="mode == 'Show'"
            ref="dialogForm"
            label-width="100px"
        >
            <el-steps :active="active" align-center finish-status="success">
                <el-step :title="item" description v-for="item in stepList" :key="item.index" />
            </el-steps>

            <el-row style="margin-top: 24px;">
                <el-col :span="8">
                    <el-form-item label-width="120px" label="单据状态:">{{entityObj.statusDesc}}</el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label-width="120px" label="物料状态:">{{entityObj.taskStatusDesc}}</el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item
                        label-width="120px"
                        label="单据金额:"
                    >{{entityObj.totalAmount}}元 = 要货金额:{{entityObj.materialFee}}元+其他费用:{{entityObj.otherFee}}元</el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label-width="120px" label="要货编号:">{{entityObj.applyOrderCode}}</el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label-width="120px" label="要货时间:">{{entityObj.applyDate}}</el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label-width="120px" label="期望到货时间:">{{entityObj.expectedDate}}</el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label-width="120px" label="要货单位:">
                        <el-tooltip placement="top">
                            <template #content>
                                联系人: {{entityObj.realName}}
                                <br />
                                联系电话:{{entityObj.mobile}}
                                <br />
                                收货地址:{{entityObj.address}}
                            </template>
                            <span style="color: blue;">{{entityObj.storeName}}</span>
                        </el-tooltip>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label-width="120px" label="供货单位:">
                        <el-tooltip placement="top">
                            <template #content>
                                联系人: {{entityObj.purchaseRealName}}
                                <br />
                                联系电话:{{entityObj.purchaseMobile}}
                                <br />
                                联系地址:{{entityObj.purchaseAddress}}
                            </template>
                            <span style="color: blue;">{{entityObj.purchaseUnityName}}</span>
                        </el-tooltip>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label-width="120px" label="申请人:">{{entityObj.applyName}}</el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label-width="120px" label="申请时间:">{{entityObj.applyDate}}</el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label-width="120px" label="最后修改人:">{{entityObj.updateName}}</el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label-width="120px" label="最后修改时间:">{{entityObj.updateTime}}</el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label-width="120px" label="附件:" v-if="entityObj.applyFile">
                        <sc-upload-file
                            v-model="entityObj.applyFile"
                            :objName="'Supply/ApplyOrder'"
                            draggable
                            :uploadType="'OSS'"
                            :bucketName="'jtmc'"
                            disabled
                            :limit="1"
                        />
                    </el-form-item>
                    <el-form-item label-width="120px" label="附件:" v-else>无</el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label-width="120px" label="备注:">{{entityObj.remarks}}</el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label-width="120px" label="要货清单:">
                        <el-table
                            :data="entityObj.applyOrderItems"
                            :border="true"
                            style="width: 100%"
                            :row-class-name="tableRowClassName" 
                        >
                            <el-table-column label="物料编码" prop="materialCode" min-width="110" />
                            <el-table-column label="物料名称" prop="materialName" min-width="180" />
                            <el-table-column label="分类" prop="materialTypeName" min-width="160" />
                            <el-table-column label="规格" prop="materialSpecs" min-width="160" />
                            <el-table-column label="单位" prop="unitName" min-width="80" />
                            <el-table-column label="要货数量" prop="qty" min-width="90" />
                            <el-table-column label="销售单价" prop="price" min-width="90" />
                            <el-table-column label="金额" prop="totalAmount" min-width="90" />
                            <el-table-column
                                label="供应商"
                                prop="supplierName"
                                min-width="100"
                            />
                            <el-table-column label="模式" prop="purchaseSaleTypeDesc" min-width="90" />
                            <el-table-column label="配送数量" prop="deliveryQty" min-width="90" />
                            <el-table-column label="配送金额" prop="deliveryAmt" min-width="90">
                                <template #default="scope">{{scope.row.deliveryQty*scope.row.price}}</template>
                            </el-table-column>
                            <el-table-column label="备注" prop="remarks" min-width="180" />
                        </el-table>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label-width="120px" label="审核备注:">{{entityObj.auditRemarks}}</el-form-item>
                </el-col>
            </el-row>
            <!-- <el-row>
                <el-col :span="24">
                    <el-form-item label-width="120px" label="赠送清单:">
                        <el-table
                            :data="entityObj.giveOrderItems"
                            :border="true"
                            style="width: 100%"
                            :row-class-name="tableRowClassName"
                        >
                            <el-table-column label="物料编码" prop="materialCode" width="110"/>
                            <el-table-column label="物料名称" prop="materialName" width="180"/>
                            <el-table-column label="分类" prop="materialTypeName" width="160"/>
                            <el-table-column label="规格" prop="materialSpecs" width="160"/>
                            <el-table-column label="单位" prop="unitName" width="110"/>
                            <el-table-column label="赠送数量" prop="qty" width="110"/>
                            <el-table-column label="配送单价" prop="price" width="110"/>
                            <el-table-column label="金额" prop="totalAmount" width="110"/>
                            <el-table-column label="备注" prop="remarks" width="140"/>
                            <el-table-column label="供应商" prop="supplierName" width="160" v-if="orgType==1"/>
                            <el-table-column label="配送数量" prop="deliveryQty" width="120"/>
                        </el-table>
                    </el-form-item>
                </el-col>
            </el-row>-->

            <!-- <el-row style="margin-top: 24px;">
                <el-col :span="8">
                    <el-form-item label-width="120px" label="结款方式:">{{entityObj.statusDesc}}</el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label-width="120px" label="状态:">{{entityObj.taskStatusDesc}}</el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label-width="120px" label="应收款项:">接单金额: - 破损退款金额: =</el-form-item>
                </el-col>
            </el-row>-->
        </el-form>
    </full-screen-dialog>
</template>



<script>
import tool from "@/utils/tool";
export default {
    emits: ["success", "closed"],
    data() {
        return {
            orgType: 2,
            stepList: ["门店已下单", "接单处理中", "已完成"],
            active: 1,
            tableRowClassName: "warning-row",
            tableRowClassName1: "success-row",
            mode: "Add",
            titleMap: {
                Add: "新增",
                Edit: "编辑",
                Show: "查看",
            },
            entityObj: {
                purchaseProtocolId: 0,
                purchaseProtocolCode: "",
                purchaseProtocolName: "",
                status: 1,
                crName: "",
                crDate: "",
                supplier: {},
                protocolDate: [],
                purchaseUnityName: "",
                remarks: "",
                protocolFile: "",
                purchaseProtocolItems: [],
                giveOrderItems: [],
            },
            materialState: false,
            queryList: {},
            visible: false,
            isSaveing: false,
            needSaveFlag: false,

            props: {
                label: "supplierName",
                value: "supplierId",
            },
            materialProps: {
                label: "materialCode",
                value: "materialId",
                items: "materialItems",
            },
            materialTypeTree: [],
            optionsBrand: [],
            optionsUnit: [],
            optionsPurchaseSaleType: [],
            suppliers: [],
        };
    },
    computed: {},
    methods: {
        handleBeforeClose() {
            this.$confirm("信息未保存,确定要关闭吗？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.visible = false;
                })
                .catch(() => {
                    // 用户点击了取消按钮，不执行关闭
                });
        },
        //显示=
        open(mode = "Add") {
            this.mode = mode;
            this.visible = true;
            return this;
        },
        //表单注入数据
        async setData(data) {
            this.entityObj = {};
            this.stepList= ["门店已下单", "接单处理中", "已完成"];
            const returnValue = await this.$API.auth.GetProcessApi.get(
                `apply-order/${data.applyOrderId}`,
                {}
            );
            if (returnValue.status == 200) {
                this.entityObj = { ...returnValue.response };
                switch (this.entityObj.status) {
                    case 0:
                    case 1:
                    case 2:
                    case 9:
                        this.stepList = ["门店已下单", this.entityObj.statusDesc];
                        this.active = 2;
                        break;
                    case 3:
                    case 4:
                        this.active = 1;
                        break;
                    case 5:
                        this.active = 2;
                        break;
                    case 8:
                        this.active = 3;
                        break;
                    default:
                        this.active = 1;
                        break;
                }
            }

            // const materialItemIds = data.applyOrderItems.map(
            //     (p) => p.materialItemId
            // );
            // const returnValue = await this.$API.auth.PostProcessApi.post(
            //     "purchase-protocol/suppliers",
            //     { materialItemIds: materialItemIds }
            // );

            // if (returnValue.status == 200) {
            //     this.suppliers = returnValue.response;
            //     const _this = this;

            //     data.applyOrderItems.map((p) => {
            //         const suppliers = _this.suppliers.filter(
            //             (t) => t.materialItemId == p.materialItemId
            //         );

            //         p.purchases.map((t) => {
            //             t.suppliers = suppliers;
            //             t.purchaseSaleType = this.optionsPurchaseSaleType.find(
            //                 (p) => p.value == t.purchaseSaleType
            //             ).value;
            //         })

            //         if (p.purchases && p.purchases.length == 0) {
            //             p.purchases.push({
            //                 suppliers: suppliers,
            //                 supplierId:
            //                     suppliers && suppliers.length > 0
            //                         ? suppliers[0].supplierId
            //                         : null,
            //                 qty: p.qty,
            //                 price:
            //                     suppliers && suppliers.length > 0
            //                         ? suppliers[0].price
            //                         : 0.0,
            //                 totalAmount:
            //                     p.qty *
            //                     (suppliers && suppliers.length > 0
            //                         ? suppliers[0].price
            //                         : 0.0),
            //                 purchaseSaleType: this.optionsPurchaseSaleType.find(
            //                     (p) => p.value == 0
            //                 ).value,
            //             });
            //         }
            //     });

            //     this.entityObj = {
            //         ...data,
            //         applyOrderItems: [...data.applyOrderItems],
            //         giveOrderItems: [...data.giveOrderItems],
            //     };
            // }
        },
        async initOptions() {
            try {
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    "base-dictionary/options",
                    { Codes: ["PurchaseSaleType"] }
                );
                if (returnValue.status == 200) {
                    this.optionsPurchaseSaleType = returnValue.response.find(
                        (p) => p.code == "PurchaseSaleType"
                    ).optionsDetails;
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }
        },
        formatDate(date) {
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, "0");
            const day = String(date.getDate()).padStart(2, "0");
            const hours = String(date.getHours()).padStart(2, "0");
            const minutes = String(date.getMinutes()).padStart(2, "0");
            const seconds = String(date.getSeconds()).padStart(2, "0");

            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        },
    },
    async mounted() {
        this.orgType = tool.data.get("USER_INFO").AccountType;
        await this.initOptions();
    },
};
</script>

<style scoped>
.el-table .warning-row {
    --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
    --el-table-tr-bg-color: var(--el-color-success-light-9);
}
.el-form-item {
    margin-bottom: 8px !important;
}
</style>
